<!-- 五区日报 -->
<!-- 班报输出-生产管理-五区日报 -->

<template>
    <div>
        <div class="bg-white grid-content">
            <!-- <el-form :inline="true" :model="searchForm" class="demo-form-inline">

                <el-form-item label="日期:">
                    <el-date-picker 
                        v-model="searchForm.searchDate" 
                        align="right" 
                        type="date" 
                        placeholder="请选择日期"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="query()">查询</el-button>
                </el-form-item>
            </el-form> -->

            <el-tabs v-model="activeName" type="card" @tab-click="handleMenuClick">
                <el-tab-pane label="提捞数据" name="first">
                    <!--输出界面-->
                    <el-table :data="tlSjData" border style="width: 100%"
                        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }">
                        <el-table-column align="center"  prop="" v-for="(itemBt) in tlBt" :key="itemBt.jgid" :label="itemBt.jgmc">
                            <template slot-scope="scope">               
                                        {{scope.row.tls?(scope.row.tls.find(item => item.bzid===itemBt.jgid)?scope.row.tls.find(item => item.bzid===itemBt.jgid).totaolPullingOil:''):''}}
                                        <!-- {{ scope.row.tls.find(item => item.bzid===itemBt.jgid).totaolBailing }} -->
                                        
                                        <!-- {{ scope.row.tls.find(item => item.tls.bzid===itemBt.jgid).bzid }} -->
                                    </template>  
                        </el-table-column>
                        <el-table-column align="center" label="捞油合计" prop="hj"></el-table-column>
                        <el-table-column align="center" label="落地油" prop="landingOil"></el-table-column>
                        <el-table-column align="center" label="作业区合计" prop="hj"></el-table-column>
                        <el-table-column align="center" label="创业拉油" prop="pullingOil"></el-table-column>

                        

                       
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="采油生产运行" name="second">
                    <!--表一采油生产运行界面-->
                    <el-table :data="bycyscyxData" border style="width: 100%"
                        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }">
                        <el-table-column align="center" label="月度配产（吨/天）" prop="planOilProdMon"></el-table-column>
                        <el-table-column align="center" label="当日完成（吨/天）" prop="dailyComplete"></el-table-column>

                        <el-table-column align="center" label="旬度完成（吨/天）">
                            <el-table-column align="center" label="上旬" prop="earlyComplete"></el-table-column>
                            <el-table-column align="center" label="中旬" prop="midComplete"></el-table-column>
                            <el-table-column align="center" label="下旬" prop="lateComplete"></el-table-column>
                        </el-table-column>

                        <el-table-column align="center" label="年度配产（吨）" prop="oilProdPerYear"></el-table-column>

                        <el-table-column align="center" label="年累计完成（吨）" prop="yearComplete"></el-table-column>

                        <el-table-column align="center" label="总井数（口）" prop="totalNum"></el-table-column>

                        <el-table-column align="center" label="开井数（口）" prop="openNum"></el-table-column>

                        <el-table-column align="center" label="长关井数（口）" prop="longShutNum"></el-table-column>

                        <el-table-column align="center" label="间抽关井（口）" prop="drawNum"></el-table-column>

                        <el-table-column align="center" label="短期关井（口）" prop="shortTimeShutNum"></el-table-column>

                        <el-table-column align="center" label="地面故障关井">
                            <el-table-column align="center" label="井数（口）" prop="wellNumber"></el-table-column>
                            <el-table-column align="center" label="影响（吨）" prop="effect"></el-table-column>
                        </el-table-column>

                        <el-table-column align="center" label="作业及措施关井">
                            <el-table-column align="center" label="检泵井">
                                <el-table-column align="center" label="井数（口）" prop="insPumpNum"></el-table-column>
                                <el-table-column align="center" label="影响（吨）" prop="insPumpEffct"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="待做业井">
                                <el-table-column align="center" label="井数（口）" prop="waitPumpNum"></el-table-column>
                                <el-table-column align="center" label="影响（吨）" prop="waitPumpEffct"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="测压井">
                                <el-table-column align="center" label="井数（口）" prop="manPumpNum"></el-table-column>
                                <el-table-column align="center" label="影响（吨）" prop="manPumpEffct"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="措施井">
                                <el-table-column align="center" label="井数（口）" prop="measurePumpNum"></el-table-column>
                                <el-table-column align="center" label="影响（吨）" prop="measurePumpEffct"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="措施配合">
                                <el-table-column align="center" label="井数（口）" prop="insCooPumpNum"></el-table-column>
                                <el-table-column align="center" label="影响（吨）" prop="insCooPumpEffct"></el-table-column>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="油井作业及措施" name="third">
                    <!--表二油井作业及措施界面-->
                    <el-table :data="beyjzyjcsData" border style="width: 100%"
                        :header-cell-style="{ background: '#F5F7FA', color: '#909399' }">
                        <el-table-column align="center" label="油井作业（口）">
                            <el-table-column align="center" label="检泵">
                                <el-table-column align="center" label="计划" prop="pumpInsPlan"></el-table-column>
                                <el-table-column align="center" label="完成" prop="pumpInsFins"></el-table-column>
                                <el-table-column align="center" label="正施工" prop="pumpInsWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="替喷">
                                <el-table-column align="center" label="正施工" prop="replaceWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="新井下泵">
                                <el-table-column align="center" label="正施工" prop="newUnderWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="措施井下泵">
                                <el-table-column align="center" label="正施工" prop="measureUnderWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="小修">
                                <el-table-column align="center" label="正施工" prop="minorRepairWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="套管调查">
                                <el-table-column align="center" label="正施工" prop="casingWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="邻井封井">
                                <el-table-column align="center" label="正施工" prop="sellingWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="措施配合">
                                <el-table-column align="center" label="正施工" prop="coordWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="小计">
                                <el-table-column align="center" label="正施工" prop="oilsubtotal"></el-table-column>
                            </el-table-column>
                        </el-table-column>

                        <el-table-column align="center" label="措施">
                            <el-table-column align="center" label="常规压裂">
                                <el-table-column align="center" label="年计划" prop="conventionalPlan"></el-table-column>
                                <el-table-column align="center" label="完成" prop="conventionalFin"></el-table-column>
                                <el-table-column align="center" label="正施工" prop="conventionalWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="缝网压裂">
                                <el-table-column align="center" label="年计划" prop="fracturePlan"></el-table-column>
                                <el-table-column align="center" label="完成" prop="fractureFin"></el-table-column>
                                <el-table-column align="center" label="正施工" prop="fractureWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="水平钻孔及压裂">
                                <el-table-column align="center" label="年计划" prop="horizontalPlan"></el-table-column>
                                <el-table-column align="center" label="完成" prop="horizontalFin"></el-table-column>
                                <el-table-column align="center" label="正施工" prop="horizontalWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="补孔">
                                <el-table-column align="center" label="年计划" prop="patchingPlan"></el-table-column>
                                <el-table-column align="center" label="完成" prop="patchingFin"></el-table-column>
                                <el-table-column align="center" label="正施工" prop="patchingWorking"></el-table-column>
                            </el-table-column>
                            <el-table-column align="center" label="小计">
                                <el-table-column align="center" label="正施工" prop="oilMeasureSubtotal"></el-table-column>
                            </el-table-column>
                        </el-table-column>

                        <el-table-column align="center" label="合计">
                            <el-table-column align="center" label="正施工" prop="allTotal"></el-table-column>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>


            </el-tabs>   
        </div>
    </div>
</template>
  
<script>
import moment from "moment";

import qbApi from "@/api/bbsc/qubao";


export default {
    data() {
        return {
            currentDay:moment().format("YYYY-MM-DD"),
            activeName: 'first',

            searchForm: {
                searchDate:'',
            },

            //提捞
            tlBt:[],
            tlData:[],

            //表一采油生产运行
            // bycyscyxData:[],
            Data1:[],//获取作业区生产运行(年度配产,月度配产)数据
            Data2:{},//获取作业区采油生产运行完成情况(当日完成,旬度完成,年累计完成)数据
            Data3:{},//获取作业区生产运行井开关情况(总井数,开井数,长关井数,间抽井数)数据
            Data4:{},//获取作业区采油生产运行地面故障关井数据
            Data5:{},//获取作业区生产运行作业及措施关井情况(检泵井,待作业井,测压井,措施井,措施配合)数据


            //表二油井作业及措施
            // beyjzyjcsData:[],
            Data11:{},//获取作业区油井作业情况(油井作业)数据
            Data12:{},//获取作业区油井措施情况(油井作业)数据
            Data13:{},//获取作业区油井作业措施合计(油井作业)数据



            //时间快捷选择
            pickerOptions: {
                disabledDate(time) {
                return time.getTime() > Date.now();
                },
                shortcuts: [{
                text: '今天',
                onClick(picker) {
                    picker.$emit('pick', new Date());
                }
                }, {
                text: '昨天',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                }
                }, {
                text: '一周前',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                }
                }]
            },
        }
    },
    created(){
        //提捞
        this.getBailingOilTableList(this.currentDay,'AS3WARuWE0')
        this.getBailingOilDataList(this.currentDay,'AS3WARuWE0')
        //采油生产运行
        this.getProPlanList(this.currentDay,'AS3WARuWE0')
        this.getOilProCompleteList(this.currentDay,'AS3WARuWE0')
        this.getWellInfoList(this.currentDay,'AS3WARuWE0')
        this.getOilFaultWell(this.currentDay,'AS3WARuWE0')
        this.getWellWorkInfo(this.currentDay,'AS3WARuWE0')
        //油井作业及措施
        this.getOilWorkInfo(this.currentDay,'AS3WARuWE0')
        this.getOilMeasureInfo(this.currentDay,'AS3WARuWE0')
        this.getOilWorkMesureTotal(this.currentDay,'AS3WARuWE0')

    },
    mounted(){

    },
    computed:{
        //
        tlSjData:function (){
            var obj = Object.assign({},this.tlData)
            console.log('tilao',obj)
            var arr =[]
            arr.push(obj)
            return arr
        },
       
        //采油生产运行
        bycyscyxData:function (){
            var obj = Object.assign({},this.Data1[0],this.Data2,this.Data3,this.Data4,this.Data5)
            // console.log(obj)
            var arr =[]
            arr.push(obj)
            return arr
        },
        //油井作业及措施
        beyjzyjcsData:function (){
            var obj = Object.assign({},this.Data11,this.Data12,this.Data13)
            // console.log(obj)
            var arr =[]
            arr.push(obj)
            return arr
        },
        

    },
    methods: {
        //查询事件
        query(){
        console.log(this.searchForm.searchDate+this.searchForm.jgid)
        if(this.searchForm.searchDate === '' || this.searchForm.searchDate === null ){
            this.searchForm.searchDate = this.currentDay 
        }
        
        //提捞
        this.getBailingOilTableList(this.searchForm.searchDate,'AS3WARuWE0')
        this.getBailingOilDataList(this.searchForm.searchDate,'AS3WARuWE0')
        //采油生产运行界面
        this.getProPlanList(this.searchForm.searchDate,'AS3WARuWE0')
        this.getOilProCompleteList(this.searchForm.searchDate,'AS3WARuWE0')
        this.getWellInfoList(this.searchForm.searchDate,'AS3WARuWE0')
        this.getOilFaultWell(this.searchForm.searchDate,'AS3WARuWE0')
        this.getWellWorkInfo(this.searchForm.searchDate,'AS3WARuWE0')
        //油井作业及措施界面
        this.getOilWorkInfo(this.searchForm.searchDate,'AS3WARuWE0')
        this.getOilMeasureInfo(this.searchForm.searchDate,'AS3WARuWE0')
        this.getOilWorkMesureTotal(this.searchForm.searchDate,'AS3WARuWE0')
        
        },


        //提捞
        async getBailingOilTableList(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getBailingOilTableList({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            console.log('1',res.data); 
            // //赋值
            this.tlBt = res.data;
            }
        },
        async getBailingOilDataList(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getBailingOilDataList({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            console.log('2',res.data); 
            // //赋值
            this.tlData = res.data;
            }
        },
        

        
        //采油生产运行
        //获取作业区生产运行(年度配产,月度配产)数据
        async getProPlanList(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getProPlanList({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data1 = res.data;
            this.Data24 = res.data;
            }
        },
        //获取作业区采油生产运行完成情况(当日完成,旬度完成,年累计完成)数据
        async getOilProCompleteList(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getOilProCompleteList({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data2 = res.data;
            }
        },
        //获取作业区生产运行井开关情况(总井数,开井数,长关井数,间抽井数)数据
        async getWellInfoList(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWellInfoList({currentDate:currentDate,orgId:jgid,wellType:'油'});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data3 = res.data;
            }
        },
        //获取作业区采油生产运行地面故障关井数据
        async getOilFaultWell(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getOilFaultWell({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data4 = res.data;
            }
        },
        //获取作业区生产运行作业及措施关井情况(检泵井,待作业井,测压井,措施井,措施配合)数据
        async getWellWorkInfo(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWellWorkInfo({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data5 = res.data;
            }
        },

        //油井作业及措施
        //获取作业区油井作业情况(油井作业)数据
        async getOilWorkInfo(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getOilWorkInfo({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data11 = res.data;
            }
        },
        //获取作业区油井措施情况(油井作业)数据
        async getOilMeasureInfo(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getOilMeasureInfo({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data12 = res.data;
            }
        },
        //获取作业区油井作业措施合计(油井作业)数据
        async getOilWorkMesureTotal(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getOilWorkMesureTotal({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data13 = res.data;
            }
        },

        //注水生产运行
        //获取作业区注水生产运行完成情况(当日完成,旬度完成,年累计完成)数据
        async getWaterProCompleteList(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWaterProCompleteList({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // // //赋值
            this.Data21 = res.data;
            }
        },
        //获取作业区注水生产运行临关井数据
        async getWaterShutWellInfo(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWaterShutWellInfo({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data22 = res.data;
            }
        },
        //获取作业区生产运行井开关情况(总井数,开井数,长关井数,间抽井数)数据
        async getWellInfoList1(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWellInfoList({currentDate:currentDate,orgId:jgid,wellType:'水'});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data23 = res.data;
            }
        },
        //获取作业区注水生产运行注水泵数据
        async getWaterPumpNum(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWaterPumpNum({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data25 = res.data;
            }
        },

        //水井作业及措施
        //获取作业区水井作业数据
        async getWaterWellWorkInfo(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWaterWellWorkInfo({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data31 = res.data;
            }
        },
        //获取作业区水井措施数据
        async getWaterWellMeasureInfo(currentDate,jgid){
        //发送查询请求
        let res = await qbApi.getWaterWellMeasureInfo({currentDate:currentDate,orgId:jgid});
            //判断是否成功
            if (res.success) {
            // console.log(res.data); 
            // //赋值
            this.Data32 = res.data;
            }
        },

        //Tab标签区域切换按钮事件
        handleMenuClick(tab, event) {
        }
    }
}
</script>
  
<style lang="scss" scoped>
// 标题
.mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
}

//按钮组
.myButtons {
    float: right
}

//格子的样式
.bg-white {
    background: #ffffff;
}

.grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.calendar ::v-deep .el-button-group::before {
    display: none;
}

.calendar ::v-deep .el-button-group::after {
    display: none;
}

// 分割线样式
.el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
}

// 表单各项的样式
.el-form-item {
    margin: 15px 10px 15px 10px;
}
</style>
  